<template>
	<view class="swiper-wrapper">
		<swiper
			:class="[indicatorType == 'square' ? 'square-dot' : 'round-dot', customClass]"
			:style="{
				height: setHeight + 'px'
			}"
			:indicator-dots="hasIndicator"
			:indicator-active-color="activeColor"
			:indicator-color="defaultColor"
			:circular="true"
			:autoplay="true"
			:current="current"
			interval="5000"
			duration="500"
			v-if="banners.length"
			@change="swiperChange"
		>
			<swiper-item v-for="(item, index) in banners" :key="index" @tap.stop="navigateToIdxFn(item)">
				<view class="swiper-img" :style="{ height: setHeight + 'px' }">
					<image
						:src="$mUtils.qiniu(item.image)"
						:mode="imageMode"
						lazy-load
						:show-menu-by-longpress="downloadImg"
						class="image"
						:style="{ borderRadius: borderRadius }"
					></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup lang="ts">
import $mUtils from '@/common/utils'

// 声明自定义属性
const props = defineProps({
	banners: {
		type: Array<any>,
		default() {
			return []
		}
	},
	height: {
		type: Number,
		default: 280
	},
	hasIndicator: {
		type: Boolean,
		default: true
	},
	indicatorType: {
		type: String,
		default: 'square'
	},
	customClass: {
		type: String,
		default: ''
	},
	activeColor: {
		type: String,
		default: ''
	},
	defaultColor: {
		type: String,
		default: ''
	},
	downloadImg: {
		type: Boolean,
		default: false
	},
	imageMode: {
		type: String,
		default: 'aspectFill'
	},
	current: {
		type: Number,
		default: 0
	},
	borderRadius: {
		type: String,
		default: '8rpx'
	}
})
// 声明触发自定义事件
const emits = defineEmits(['change', 'update:current'])

const setHeight = computed(() => {
	return uni.upx2px(props.height)
})

function swiperChange(e: any) {
	emits('change', e)
	emits('update:current', e.detail.current)
}

function navigateToIdxFn(item: any) {
	$mUtils.navigateToIdx(item)
}
</script>
<style lang="scss" scoped>
.swiper-wrapper {
	.swiper-img {
		width: 100%;
		.image {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
